<template>
  <div class="control">
    <div class="control-top centerbox">
      <div class="left">
        <div class="btn btop pointer" @click="setYt('上升')"></div>
        <div class="btn bleft pointer" @click="setYt('前进')" ></div>
        <div class="btn bright pointer" @click="setYt('后退')" ></div>
        <div class="btn bbottom pointer" @click="setYt('下降')"></div>
        <div class="btn stop pointer" @click="setYt('停止')"></div>
      </div>
      <div class="right centerbox" >
        <div class="centerbox cl-btn" @click="setControl('权限获取')">
          <span></span>
          <span>权限获取</span>
        </div>
        <div class="centerbox cl-btn" @click="setControl('权限释放')">
          <span></span>
          <span>权限释放</span>
        </div>
        <div class="centerbox cl-btn" @click="setControl('一键返航')">
          <span></span>
          <span>一键返航</span>
        </div>
        <div>
          <el-select v-model="moudle" size="mini" @change="setControl">
            <el-option
              v-for="(item,index) in optionList "
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <!-- <div class="betweenbox sf">
          <span class="el-icon-minus pointer" @mousedown="setControl('11')" @mouseup="setControl('12')"></span>
          <span class="hr"></span>
          <span class="el-icon-search"></span>
          <span class="hr"></span>
          <span class="el-icon-plus pointer" @mousedown="setControl('09')" @mouseup="setControl('10')"></span>
        </div>-->
        <!-- <div class="betweenbox jj">
          <span class="el-icon-minus pointer" @mousedown="setControl('19')" @mouseup="setControl('20')"></span>
          <span class="hr"></span>
          <span class="el-icon-help"></span>
          <span class="hr"></span>
          <span class="el-icon-plus pointer" @mousedown="setControl('17')" @mouseup="setControl('18')"></span>
        </div>-->
        <div></div>
      </div>
      <div></div>
    </div>
    <div class="control-mid"></div>
    <div class="control-bot betweenbox">
      <div class="pointer" @click="setWindow(1)">
        <div class="yhm"></div>
        <div class="centerbox">一画面</div>
      </div>
      <div class="pointer" @click="setWindow(2)">
        <div class="shm"></div>
        <div class="centerbox">四画面</div>
      </div>
      <div class="pointer" @click="setWindow(3)">
        <div class="jhm"></div>
        <div class="centerbox">九画面</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class extends Vue {
  moudle = "手持模式";
  optionList = [
    {
      name: "任务模式",
      id: "任务模式",
    },
    {
      name: "紧急定位",
      id: "紧急定位",
    },
    {
      name: "后台遥控",
      id: "后台遥控",
    },
    {
      name: "手持模式",
      id: "手持模式",
    },
  ];
  // 设置云台控制
  setYt(name){
    // if(this.moudle==='手持模式'){
      this.setControl(name)
    // }else{
    //    this.moudle = "手持模式";
    //    this.setControl('手持模式')
    //    this.setControl(name)
    // }
  }
  setControl(name) {
    this.$emit("setControl", name);
  }
  //   窗口设置
  setWindow(num) {
    this.$emit("setWindow", num);
  }
}
</script>

<style lang="scss" scoped>
.control {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &-top {
    width: 100%;
    height: 1.3rem;
    margin: 0.1rem auto;
  }
  &-mid {
    width: 90%;
    height: 2px;
    margin: 0.1rem auto;
    background: linear-gradient(
      90deg,
      rgba(53, 238, 250, 0),
      #35eefa,
      rgba(53, 238, 250, 0)
    );
  }
  &-bot {
    width: 100%;
    height: 0.6rem;
    margin: 0.1rem auto;
    padding: 0 0.4rem;
  }
  .left {
    width: 1.3rem;
    height: 1.3rem;
    background: url("../../../../../assets/img/VideoControl/control.png")
      no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    .btn {
      position: absolute;
      margin: auto;
      width: 0.5rem;
      height: 0.5rem;
    }
    .btop {
      top: 0px;
      left: 0;
      right: 0;
    }
    .bleft {
      top: 0;
      left: 0px;
      bottom: 0;
    }
    .bright {
      top: 0;
      right: 0px;
      bottom: 0;
    }
    .bbottom {
      bottom: 0px;
      left: 0;
      right: 0;
    }
    .stop {
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
  .right {
    width: 1.5rem;
    height: 1.3rem;
    margin-left: 0.06rem;
    flex-wrap: wrap;
    align-content: space-between;
    > div {
      width: 100%;
    }
    .cl-btn {
      cursor: pointer;
      border: 1px solid #03bfff;
      // background: rgba(6,54,54,0.5);
      border-radius: 4px;
      height: 0.28rem;
    }
    .jj,
    .sf {
      font-size: 0.24rem;
      border: 1px solid #03bfff;
      border-radius: 3px;
      padding: 0.06rem 0.1rem;
      margin-top: 0.1rem;
    }
    .sf {
      margin-top: 0.4rem;
    }
    .hr {
      display: inline-block;
      width: 1px;
      height: 0.2rem;
      background: #03bfff;
    }
  }
  .yhm,
  .shm,
  .jhm {
    width: 0.26rem;
    height: 0.26rem;
    margin: 4px auto;
    cursor: pointer;
  }
  .yhm {
    background: url("../../../../../assets/img/VideoControl/1.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .shm {
    background: url("../../../../../assets/img/VideoControl/4.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .jhm {
    background: url("../../../../../assets/img/VideoControl/9.png") no-repeat
      center center;
    background-size: 100% 100%;
  }
  .pointer {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
body {
  .el-input--mini .el-input__inner {
    height: 0.28rem !important;
    line-height: 0.28rem !important;
  }
}
</style>

